---
title: UrlNodeRenderer URL节点渲染器
icon: Share2
relatedFile: app/src/core/render/canvas2d/entityRenderer/urlNode/urlNodeRenderer.tsx
---

用于在画布上渲染 UrlNode 对象，包括其视觉表现和交互状态。

这个服务负责将 UrlNode 的各种视觉元素绘制到屏幕上，并根据用户交互（如鼠标悬停）提供视觉反馈。它依赖于 Project 实例中提供的其他渲染器和样式管理器来完成绘制任务，确保渲染效果与项目整体风格一致。

## API

### `render(urlNode: UrlNode): void`

此方法用于渲染单个 UrlNode 对象。

-   如果 UrlNode 被选中，基于 `urlNode.collisionBox` 渲染一个选中框。
-   绘制 UrlNode 的主体矩形，包括其位置、大小、颜色、边框样式和圆角。
-   如果 UrlNode 的标题未处于编辑状态，则绘制其标题文本。
-   绘制一条分隔线，将标题区域与 URL 区域分开。
-   绘制 UrlNode 的 URL 文本，如果 URL 过长则进行截断并添加省略号。
-   调用 `this.project.entityRenderer.renderEntityDetails(urlNode)` 来渲染 UrlNode 的其他详细信息。
-   调用 `renderHoverState` 方法来处理并渲染鼠标悬停时的视觉效果。

### `renderHoverState(urlNode: UrlNode): void`

此私有方法用于渲染 UrlNode 的鼠标悬停状态。

-   检测鼠标当前位置是否在 UrlNode 的标题区域内。
    -   如果鼠标在标题区域内，则渲染一个高亮矩形作为预选状态的视觉反馈。
-   检测鼠标当前位置是否在 UrlNode 的 URL 区域内。
    -   如果鼠标在 URL 区域内，则渲染一个高亮矩形作为预选状态的视觉反馈。
    -   同时，在 URL 区域下方绘制提示文本“双击打开链接”，引导用户进行交互。
